<!DOCTYPE html>
<html>
<!--
*   此
*
*
-->

<head>
<meta charset="utf-8">
<script src="ace/ace.js"></script>
<script src="ace/ext-language_tools.js"></script>
<script src="ace/ext-searchbox.js"></script>
<script src="mockjs/mock.js"></script>

</head>

<style>
    body{
        background-color: #272822;
    }
    .test_box{
        min-width: 400px;
        height:53rem;
        display: flex;
    }
    #msgback {
        text-align: center;
        font-size: 16px;
        line-height: 50px;
        color: #eee;
        position:fixed;
        border-radius: 5px;

        pointer-events: none;
        left:35%;
        width: 8%;
        top:1%;
        height: 50px;
        z-index: 999;
    }
    .btn{
        margin-bottom: 5px;
        background-color: #888888;
        color:white;
        width: 180px;
        height: 35px;
        border:0;
        font-size: 13px;
        border-radius: 5px;
    }
    .btn:hover{
        opacity: 0.7;
    }
    #ul_id{
        padding-top: -10px;
        padding-left: 0px;
        padding-right: 5px;
        list-style-type: none;
        height: 68%;
        width: 200px;
        overflow-y:scroll;
    }
    #ul_id2{
        padding-left: 0px;
        padding-right: 0px;
        list-style-type: none;
        width: 200px;
        overflow-y:scroll;
    }
    ul#ul_id2 .li div .value code{
	    height:1px;
	    display: flex;
    	flex-direction: column-reverse;
    }
    ::-webkit-scrollbar-track {
        opacity: 0
    }

    ::-webkit-scrollbar {
        width: 3px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #636363;
        opacity: 30%;
        border-radius: 3px;
    }
    .li{
      width: 180px;
      padding-left: 10px;
      background-position: 0 0;
      background-size: 1.6rem 1.6rem;
      background-repeat: no-repeat;
    }
    .name{
        font-size: 14px;
        font-family: Consolas, "微软雅黑";
    }
    .codeItem{
        font-family: Consolas, "微软雅黑";
        color: #ffffff;
        background-color: #666666;
        border-radius: 4px;
        padding: 10px;
        font-size: 14px;
    }
    .codeItem:hover{
        color: #ffffff;
        background-color: #4c4c4c;
    }
    .codeItem:active{
        color: #ffffff;
        background-color: #363636;
    }
    .codeItem2{
        font-family: Consolas, "微软雅黑";
        color: #ffffff;
        background-color: #f6c428;
        border-radius: 4px;
        padding: 10px;
        font-size: 14px;
    }
    .codeItem2:hover{
        color: #ffffff;
        background-color: #dea90a;
    }
    .codeItem2:active{
        color: #ffffff;
        background-color: #af8607;
    }
    code{
        white-space:pre;
    }
    a{
        text-decoration: none;
        color:#00f;
    }
    .value{
        font-size: 14px;
        position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;
    }
    .tip{
        font-size: 15px;
        font-family: Consolas, "微软雅黑";
        display: none;
        z-index: 9999;
        text-align: left;
    }
    #input {
        font-family: Consolas, "微软雅黑";
        margin: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #result {
        font-family: Consolas, "微软雅黑";
        margin: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>

<body>

    <div class="test_box">
        <pre id="input"style="height: 100%;width:45%;" class="ace_editor">
<textarea class="ace_text-input" cssStyle="width:40%;height:320px;">
</textarea></pre>

        <div style="height: 600px; width: 200px; border-radius: 5px;">
<!--            <center>-->
            <div id="buttonDiv" style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;">
                <input id="runbtn" type="button" class="btn" style=" background-color: #3c7de6;" value="执行" onclick="runCode()"/>
                <input id="copyAndRunbtn" type="button" class="btn" style="width:90px; background-color: #fe6600;" value="运行结果" onclick="copyAndRun()">
                <input id="copybtn" type="button" class="btn" style="width:90px; background-color: #3e7d04;" value="复制结果" onclick="copyResult()"/>
            </div>
<!--            </center>-->
            <center>
                <p style="display:none">
                    <label style="color:#fff">主题：</label>
                    <select id="themeSelect" onchange="changeTheme()" style="max-width:132px">
                        <option value="ambiance">ambiance</option>
                        <option value="chaos">chaos</option>
                        <option value="chrome">chrome</option>
                        <option value="cloud9_day">cloud9_day</option>
                        <option value="cloud9_night">cloud9_night</option>
                        <option value="cloud9_night_low_color">cloud9_night_low_color</option>
                        <option value="clouds">clouds</option>
                        <option value="clouds_midnight">clouds_midnight</option>
                        <option value="cobalt">cobalt</option>
                        <option value="crimson_editor">crimson_editor</option>
                        <option value="dawn">dawn</option>
                        <option value="dracula">dracula</option>
                        <option value="dreamweaver">dreamweaver</option>
                        <option value="eclipse">eclipse</option>
                        <option value="github">github</option>
                        <option value="gob">gob</option>
                        <option value="gruvbox">gruvbox</option>
                        <option value="gruvbox_dark_hard">gruvbox_dark_hard</option>
                        <option value="gruvbox_light_hard">gruvbox_light_hard</option>
                        <option value="idle_fingers">idle_fingers</option>
                        <option value="iplastic">iplastic</option>
                        <option value="katzenmilch">katzenmilch</option>
                        <option value="kr_theme">kr_theme</option>
                        <option value="kuroir">kuroir</option>
                        <option value="merbivore">merbivore</option>
                        <option value="merbivore_soft" selected="selected">merbivore_soft</option>
                        <option value="mono_industrial">mono_industrial</option>
                        <option value="monokai">monokai</option>
                        <option value="nord_dark">nord_dark</option>
                        <option value="one_dark">one_dark</option>
                        <option value="pastel_on_dark">pastel_on_dark</option>
                        <option value="solarized_dark">solarized_dark</option>
                        <option value="solarized_light">solarized_light</option>
                        <option value="sqlserver">sqlserver</option>
                        <option value="terminal">terminal</option>
                        <option value="textmate">textmate</option>
                        <option value="tomorrow">tomorrow</option>
                        <option value="tomorrow_night">tomorrow_night</option>
                        <option value="tomorrow_night_blue">tomorrow_night_blue</option>
                        <option value="tomorrow_night_bright">tomorrow_night_bright</option>
                        <option value="tomorrow_night_eighties">tomorrow_night_eighties</option>
                        <option value="twilight">twilight</option>
                        <option value="vibrant_ink">vibrant_ink</option>
                        <option value="xcode">xcode</option>
                    </select>
                </p>
                <p style="">
                    <label style="color:#fff">语言：</label>
                    <select id="resultLangSelect" onchange="changeLang()">
                        <option value="abap">abap</option>
                        <option value="abc">abc</option>
                        <option value="actionscript">actionscript</option>
                        <option value="ada">ada</option>
                        <option value="alda">alda</option>
                        <option value="apache_conf">apache_conf</option>
                        <option value="apex">apex</option>
                        <option value="applescript">applescript</option>
                        <option value="aql">aql</option>
                        <option value="asciidoc">asciidoc</option>
                        <option value="asl">asl</option>
                        <option value="assembly_x86">assembly_x86</option>
                        <option value="autohotkey">autohotkey</option>
                        <option value="batchfile">batchfile</option>
                        <option value="c_cpp">c_cpp</option>
                        <option value="c9search">c9search</option>
                        <option value="cirru">cirru</option>
                        <option value="clojure">clojure</option>
                        <option value="cobol">cobol</option>
                        <option value="coffee">coffee</option>
                        <option value="coldfusion">coldfusion</option>
                        <option value="crystal">crystal</option>
                        <option value="csharp">csharp</option>
                        <option value="csound_document">csound_document</option>
                        <option value="csound_orchestra">csound_orchestra</option>
                        <option value="csound_score">csound_score</option>
                        <option value="csp">csp</option>
                        <option value="css">css</option>
                        <option value="curly">curly</option>
                        <option value="d">d</option>
                        <option value="dart">dart</option>
                        <option value="diff">diff</option>
                        <option value="django">django</option>
                        <option value="dockerfile">dockerfile</option>
                        <option value="dot">dot</option>
                        <option value="drools">drools</option>
                        <option value="edifact">edifact</option>
                        <option value="eiffel">eiffel</option>
                        <option value="elixir">elixir</option>
                        <option value="elm">elm</option>
                        <option value="erlang">erlang</option>
                        <option value="forth">forth</option>
                        <option value="fortran">fortran</option>
                        <option value="fsharp">fsharp</option>
                        <option value="fsl">fsl</option>
                        <option value="ftl">ftl</option>
                        <option value="gcode">gcode</option>
                        <option value="gherkin">gherkin</option>
                        <option value="gitignore">gitignore</option>
                        <option value="glsl">glsl</option>
                        <option value="gobstones">gobstones</option>
                        <option value="golang">golang</option>
                        <option value="graphqlschema">graphqlschema</option>
                        <option value="groovy">groovy</option>
                        <option value="haml">haml</option>
                        <option value="handlebars">handlebars</option>
                        <option value="haskell">haskell</option>
                        <option value="haskell_cabal">haskell_cabal</option>
                        <option value="haxe">haxe</option>
                        <option value="on">on</option>
                        <option value="html">html</option>
                        <option value="html_elixir">html_elixir</option>
                        <option value="html_ruby">html_ruby</option>
                        <option value="ini">ini</option>
                        <option value="io">io</option>
                        <option value="ion">ion</option>
                        <option value="jack">jack</option>
                        <option value="jade">jade</option>
                        <option value="java">java</option>
                        <option value="javascript">javascript</option>
                        <option value="modeon">modeon</option>
                        <option value="modeon5">modeon5</option>
                        <option value="modeoniq">modeoniq</option>
                        <option value="modep">modep</option>
                        <option value="modesm">modesm</option>
                        <option value="modex">modex</option>
                        <option value="julia">julia</option>
                        <option value="kotlin">kotlin</option>
                        <option value="latex">latex</option>
                        <option value="latte">latte</option>
                        <option value="less">less</option>
                        <option value="liquid">liquid</option>
                        <option value="lisp">lisp</option>
                        <option value="livescript">livescript</option>
                        <option value="logiql">logiql</option>
                        <option value="logtalk">logtalk</option>
                        <option value="lsl">lsl</option>
                        <option value="lua">lua</option>
                        <option value="luapage">luapage</option>
                        <option value="lucene">lucene</option>
                        <option value="makefile">makefile</option>
                        <option value="markdown">markdown</option>
                        <option value="mask">mask</option>
                        <option value="matlab">matlab</option>
                        <option value="maze">maze</option>
                        <option value="mediawiki">mediawiki</option>
                        <option value="mel">mel</option>
                        <option value="mips">mips</option>
                        <option value="mixal">mixal</option>
                        <option value="mushcode">mushcode</option>
                        <option value="nginx">nginx</option>
                        <option value="nim">nim</option>
                        <option value="nix">nix</option>
                        <option value="nsis">nsis</option>
                        <option value="nunjucks">nunjucks</option>
                        <option value="objectivec">objectivec</option>
                        <option value="ocaml">ocaml</option>
                        <option value="partiql">partiql</option>
                        <option value="pascal">pascal</option>
                        <option value="perl">perl</option>
                        <option value="php">php</option>
                        <option value="php_laravel_blade">php_laravel_blade</option>
                        <option value="pig">pig</option>
                        <option value="plain_text">plain_text</option>
                        <option value="powershell">powershell</option>
                        <option value="praat">praat</option>
                        <option value="prisma">prisma</option>
                        <option value="prolog">prolog</option>
                        <option value="properties">properties</option>
                        <option value="protobuf">protobuf</option>
                        <option value="puppet">puppet</option>
                        <option value="python">python</option>
                        <option value="qml">qml</option>
                        <option value="r">r</option>
                        <option value="raku">raku</option>
                        <option value="razor">razor</option>
                        <option value="rdoc">rdoc</option>
                        <option value="red">red</option>
                        <option value="redshift">redshift</option>
                        <option value="rhtml">rhtml</option>
                        <option value="robot">robot</option>
                        <option value="rst">rst</option>
                        <option value="ruby">ruby</option>
                        <option value="rust">rust</option>
                        <option value="sac">sac</option>
                        <option value="sass">sass</option>
                        <option value="scad">scad</option>
                        <option value="scala">scala</option>
                        <option value="scheme">scheme</option>
                        <option value="scrypt">scrypt</option>
                        <option value="scss">scss</option>
                        <option value="sh">sh</option>
                        <option value="slim">slim</option>
                        <option value="smarty">smarty</option>
                        <option value="smithy">smithy</option>
                        <option value="snippets">snippets</option>
                        <option value="soy_template">soy_template</option>
                        <option value="space">space</option>
                        <option value="sparql">sparql</option>
                        <option value="sql">sql</option>
                        <option value="sqlserver">sqlserver</option>
                        <option value="mysql" selected="selected">mysql</option>
                        <option value="pgsql">pgsql</option>
                        <option value="stylus">stylus</option>
                        <option value="svg">svg</option>
                        <option value="swift">swift</option>
                        <option value="tcl">tcl</option>
                        <option value="terraform">terraform</option>
                        <option value="tex">tex</option>
                        <option value="text">text</option>
                        <option value="textile">textile</option>
                        <option value="toml">toml</option>
                        <option value="tsx">tsx</option>
                        <option value="turtle">turtle</option>
                        <option value="twig">twig</option>
                        <option value="typescript">typescript</option>
                        <option value="vala">vala</option>
                        <option value="vbscript">vbscript</option>
                        <option value="velocity">velocity</option>
                        <option value="verilog">verilog</option>
                        <option value="vhdl">vhdl</option>
                        <option value="visualforce">visualforce</option>
                        <option value="wollok">wollok</option>
                        <option value="xml">xml</option>
                        <option value="xquery">xquery</option>
                        <option value="yaml">yaml</option>
                        <option value="zeek">zeek</option>
                    </select>
                </p>
            </center>

                <center><a href="./mockInfo.html" target="_blank"><input type="button" class="btn" style="width:90px; background-color: #3e7d04;" value="MockJs语法"/></a></center>
                <ul id="ul_id" style="text-align: center;">
                </ul>
                <ul id="ul_id2" style="text-align: center;">
                    <li class="li">
                    <div>
                         <a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="replaceFuncValue(this.parentElement);changeLangByName('sql')" ><p class="codeItem2">数据库 造数据</p></a>
                         <div class="value" ><code></code></div>
                         <span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">根据表名、字段名生成造数据的js代码</span>
                    </div>
                    </li>
                    <li class="li">
                    <div>
                         <a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="replaceFuncValue(this.parentElement);changeLangByName('javascript')" ><p class="codeItem2">json 造数据</p></a>
                         <div class="value" ><code></code></div>
                         <span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">造json数据的例子</span>
                    </div>
                    </li>
                    <li class="li">
                    <div>
                         <a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="replaceFuncValue(this.parentElement)" ><p class="codeItem2">造数据</p></a>
                         <div class="value" ><code></code></div>
                         <span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">直接一列数据，方便复制到excel</span>
                    </div>
                    </li>
                    <li class="li">
                    <div>
                         <a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="replaceFuncValue(this.parentElement);changeLangByName('sql')" ><p class="codeItem2">mybatis log</p></a>
                         <div class="value" ><code></code></div>
                         <span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">根据mybatis log生成实际sql语句</span>
                    </div>
                    </li>
                </ul>
        </div>

        <pre id="result" style="height:100%;width:45%;" class="ace_editor"><textarea class="ace_text-input" cssStyle="width:40%;height:320px;">
</textarea></pre>
        <div id="msgback" style=""/>

    </div>

<textarea id="code1" style="display:none">//使用result.setValue()来输出结果
    //使用result.setValue()来输出结果
    <script>
    //输入表名和字段名一级对应的值或Random函数，字段和值数量要一致
    //点击执行，即可生成造数据的js
    var tablename = 'spif.tpd_clas';
    var tablecols = 'id, inr_pd_code, clas_dim, pri_clas, scd_clas, upd_date';

    //以下代码无需改动
    var tabColArr = [];
    var tabColArr2 = [];
    var tabColArr3 = [];
    var jsStr = '';
    var sqlStr = "var sql = `insert into "+tablename+"(";

    for(var i = 0;i < tablecols.split(',').length;i++){
        var eachcol = tablecols.split(',')[i].trim();
        if (eachcol == '' || eachcol == ','){
            continue;
        }
        tabColArr.push(eachcol);
        tabColArr2.push("'${"+eachcol+"}'");
        tabColArr3.push("    var "+eachcol+" = "+i+";");
    }

    sqlStr+=tabColArr.join()+") values ("+tabColArr2.join()+");`;\n";
    jsStr+="<script>//复制代码再运行一遍\n"+
        "var Random = Mock.Random;\n"+
        "function createSql(num)\n"+
        "{\n"+
        "var tempStr ='';\n"+
        "for (var i = 0; i < num; i++) {\n"+
        tabColArr3.join("\r\n")+"\r\n"+sqlStr+
        "tempStr+=sql+'\\r\\n';\n"+
        "}\n"+
        "result.setValue(tempStr);\n"+
        "}\n"+
        "createSql(20)\n<\/script>";
    result.setValue(jsStr);
    </script>
</textarea>
<textarea id="code4" style="display:none">//使用result.setValue()来输出结果
<code id="str" style="display:none;">
//此处输入Mybatis Log
2021-07-22 17:46:36.869 DEBUG 38688 --- [http-nio-8080-exec-6] c.b.m.e.p.p.o.JsqlParserCountOptimize    : JsqlParserCountOptimize sql=SELECT id,password,address,phone,name,email FROM T_USER_TEST3  WHERE name = ?
2021-07-22 17:46:36.906 DEBUG 38688 --- [http-nio-8080-exec-6] c.d.d.m.U.pagingBySearchable             : ==>  Preparing: SELECT COUNT(1) FROM T_USER_TEST3 WHERE name = ?
2021-07-22 17:46:36.998 DEBUG 38688 --- [http-nio-8080-exec-6] c.d.d.m.U.pagingBySearchable             : ==> Parameters: zhangsan3(String)
</code>

<script>

var localName;
setTimeout(function(){
exec();
},200); //延时防止找不到代码元素报错

function exec() {
    localName = document.querySelector('iframe').contentWindow.document.body.getElementsByTagName("code")[0].innerText;

    var lineList = localName.trim().split("\n");
    var logs = "";
    //处理所有的sql组
    //原始的sql组的list
    var oldSqlArr = [];
    var oneOldSql = {"sql": null, "paramStr": null};
    for (var i = 0; i < lineList.length; i++) {
        var oneLine = lineList[i];
        if (oneLine.trim().length === 0) {
            continue;
        }
        if (oneLine.indexOf("Preparing: ") > 0) {//sql语句
            if (oneOldSql.sql != null) {
                oldSqlArr.push(oneOldSql);
                oneOldSql = {"sql": null, "paramStr": null};//参数语句
            }
            oneOldSql.sql = oneLine.substring(oneLine.indexOf("Preparing: ") + 11, oneLine.length);
        } else if (oneLine.indexOf("Parameters: ") > 0) {
            oneOldSql.paramStr = oneLine.substring(oneLine.indexOf("Parameters: ") + 12, oneLine.length);
        }
        // logs+="\n"+oneLine;
    }
    if (oneOldSql.sql != null) {
        oldSqlArr.push(oneOldSql);
    }
    //遍历所有的sql组,拼接sql语句
    if (oldSqlArr.length > 0) {
        var sqlTemp = "", sqlIndex = -1;

        for (var j = 0; j < oldSqlArr.length; j++) {
            oneOldSql = oldSqlArr[j];
            logs += "------sql" + (j + 1) + "-------\n";
            if (oneOldSql.paramStr == null) {
                logs += oneOldSql.sql + "\n";
            } else {
                sqlTemp = oneOldSql.sql;
                //参数剪切
                var paranAndTypeList = oneOldSql.paramStr.trim().split(", ");
                for (var number = 0; number < paranAndTypeList.length; number++) {
                    var paranAndTypeStr = paranAndTypeList[number].trim();
                    var paramValue, paramType;
                    if (paranAndTypeStr.indexOf(")") > 0) {
                        //有类型
                        // paranAndTypeStr = paranAndTypeStr.substring(0, paranAndTypeStr.length - 1);
                        paramValue = paranAndTypeStr.substring(0, paranAndTypeStr.lastIndexOf("("));
                        paramType = paranAndTypeStr.substring(paranAndTypeStr.lastIndexOf("(") + 1, paranAndTypeStr.length - 1);
                    } else {
                        //没有类型
                        paramType = null;
                        paramValue = paranAndTypeStr;
                    }
                    if (!(paramType == null || paramType === "" || paramType === "Long" || paramType === "Integer" || paramType === "Byte" || paramType === "Boolean" || paramValue === "null")) {
                        paramValue = "'" + paramValue.trim() + "'";
                    }
                    sqlIndex = sqlTemp.indexOf("?");
                    sqlTemp = sqlTemp.substring(0, sqlIndex) + paramValue + sqlTemp.substring(sqlIndex + 1, sqlTemp.length);
                    // logs += "\n paramType:" + paramType + "  paramValue:" + paramValue;
                }
                logs += sqlTemp + "\n";
            }

        }
    }
    result.setValue(logs);

}
</script>

</textarea>
<textarea id="code2" style="display:none">
<script>
var Random = Mock.Random;

createSql(12)

function createSql(num)
{
    var tempStr ='';
    var records = [];
    var data = {};
    data.code = 1;
    data.note = "查询成功";
    data.total=num;
    data.hasrecordset=num > 0? 1 : 0;
    for (var i = 0; i < num; i++) {

        var date = new Date();
        date.setDate(date.getDate() + i);

        var record = Mock.mock({
	        "id": i+1,
            "date": date.format('yyyyMMdd'),
            "poffAst|0-1000000.2": 1,
            "pteAst|0-1000000.2": 1,
            "fAst|0-1000000.2": 1,
            "pthAst|0-1000000.2": 1,
            "ast|0-10000000.2": 1
        	});
        records.push(record);
    }
    data.records=records;
    result.setValue(JSON.stringify(data,null,2));
}
</script>
</textarea>
<textarea id="code3" style="display:none">
<script>
var Random = Mock.Random;

createSql(10)

function createSql(num)
{
    var tempStr ="";
    var records = [];
    for (var i = 0; i < num; i++) {

        var date = new Date();
        date.setDate(date.getDate() + i);

        var record = Mock.mock({
            "str": Random.float(-10,10,4,4)/100
        	});
        records.push(record);
        tempStr += record.str + "\n";
    }
    result.setValue(tempStr);
}
</script>

</textarea>
<script>

    /* 列表项中a标签
     <a href='javascript:void(0);' onclick='insertObjText(this)'>Random.character('lower')</a><br>

     列表项中绿色a标签
     <a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.character('lower')</a><br>

     选项说明+默认值
     Random.increment( step? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.increment(1)</a><br>
    列表项 */
    var ulItems =[
                  {
                    "name": "boolean",
                    "value": "Random.boolean()",
                    "tip": "布尔：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.boolean()</a>"
                  },
                  {
                    "name": "increment",
                    "value": "Random.increment(1)",
                    "tip": "自增：Random.increment( step? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.increment(1)</a>"
                  },
                  {
                    "name": "integer",
                    "value": "Random.integer(1,10)",
                    "tip": "整数：Random.integer( min?, max? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.integer(1,10)</a>"
                  },
                  {
                    "name": "float",
                    "value": "Random.float(0,99999999,2)",
                    "tip": "浮点型：Random.float( min?, max?, dmin?, dmax? )<br><br>金额：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.float(0,99999999,2)</a><br>股票份额：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.float(0,99999,0)*100</a><br>基金份额：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.float(0,9999,2)</a><br>百分比：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.float(0,0.9999,4)</a>"
                  },
                  {
                    "name": "character",
                    "value": "Random.character('number')",
                    "tip": "字符：Random.character( type?)<br><br>小写字母：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.character('lower')</a><br>大写字母：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.character('upper')</a><br>数字：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.character('number')</a><br>符号：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.character('symbol')</a>"
                  },
                  {
                    "name": "string",
                    "value": "Random.string('number', 6)",
                    "tip": "字符串：Random.string( type?, num? )<br><br>小写字母：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.string('lower',6)</a><br>大写字母：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.string('upper',6)</a><br>数字：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.string('number',6)</a><br>符号：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.string('symbol',6)</a>"
                  },
                  {
                    "name": "date",
                    "value": "Random.datetime('yyyyMMdd')",
                    "tip": "日期时间：Random.datetime(format?)<br>现在日期时间：Random.now(format?)<br><br>日期：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.datetime('yyyyMMdd')</a><br>时间：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.datetime('HH:mm:ss')</a><br>时间戳：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.datetime('T')</a><br><label style='color:#FE6600'>现在</label>时间：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.now('yyyy-MM-dd HH:mm:ss SS')</a><br><label style='color:#FE6600'>现在</label>时间戳：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.now('T')</a>"
                  },
                  {
                    "name": "cparagraph",
                    "value": "Random.cparagraph(1)",
                    "tip": " 段落：Random.cparagraph( min?, max? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.cparagraph(1)</a>"
                  },
                  {
                    "name": "ctitle",
                    "value": "Random.ctitle(1,50)",
                    "tip": " 文字：Random.ctitle( min?, max? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.ctitle(1,50)</a>"
                  },
                  {
                    "name": "name",
                    "value": "Random.cname()",
                    "tip": " 中文姓名：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.cname()</a><br>中文姓：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.cfirst()</a><br>中文名：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.clast()</a><br>英文姓名：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.name()</a><br>英文姓：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.first()</a><br>英文姓：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.last()</a>"
                  },
                  {
                    "name": "id",
                    "value": "Random.id()",
                    "tip": " 身份证：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.id()</a>"
                  },
                  {
                    "name": "email / url / ip",
                    "value": "Random.email()",
                    "tip": " 邮箱：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.email()</a><br>网址：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.url()</a><br>IP：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.ip()</a>"
                  },
                  {
                    "name": "address",
                    "value": "Random.county(true)",
                    "tip": " 省 市 区：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.county(true)</a><br>省份：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.province()</a><br>城市：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.city()</a><br>区县：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.county(false)</a><br>邮编：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.zip()</a>"
                  },
                  {
                    "name": "Letter Case",
                    "value": "Random.upper('')",
                    "tip": " 大写：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.upper('')</a><br>小写：<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.lower('')</a>"
                  },
                  {
                    "name": "pick",
                    "value": "Random.pick(Random.range(10))",
                    "tip": " 选择：Random.pick([1, 2, 3])<br>范围数组：Random.range(start?, stop?, step?)<br><br>选择1-10：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.pick(Random.range(10))</a>"
                  },
                  {
                    "name": "guid",
                    "value": "Random.guid()",
                    "tip": "GUID：<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.guid()</a>"
                  },
                ];


    var input = ace.edit("input");
    var result = ace.edit("result");
    var msgFlag = false;


    initEditor();

    var code1=document.getElementById('code1').value;
    var code2=document.getElementById('code2').value;
    var code3=document.getElementById('code3').value;
    var code4=document.getElementById('code4').value;
    var codeli1 = document.getElementById('ul_id2').getElementsByTagName('li')[0];
    codeli1.getElementsByTagName('code')[0].innerText=code1;
    var codeli2 = document.getElementById('ul_id2').getElementsByTagName('li')[1];
    codeli2.getElementsByTagName('code')[0].innerText=code2;
    var codeli3 = document.getElementById('ul_id2').getElementsByTagName('li')[2];
    codeli3.getElementsByTagName('code')[0].innerText=code3;
    var codeli4 = document.getElementById('ul_id2').getElementsByTagName('li')[3];
    codeli4.getElementsByTagName('code')[0].innerText=code4;

    //默认代码为code1
    input.setValue(code1);
    input.selection.clearSelection();
    runCode(); //打开页面时执行文本域内已经存在的代码

    //-------------------------------以下是函数

    window.onload = function(){
        //列表项加载点击输入的函数
        var ul = document.getElementById("ul_id");
        var str = "";
        for(var i=0; i<ulItems.length; i++){
            str+='<li class="li">'
                    + '<div>'
                       + '<a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="insertFuncValue(this.parentElement)" onmouseleave="/*hideTip(this.parentElement)*/" ><p class="codeItem">'+ulItems[i].name+'</p></a>'
                       + '<div class="value" ><code>'+ulItems[i].value+'</code></div>'
                       + '<span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">'+ulItems[i].tip+'</span>'
                    +'</div>'
                +'</li>'
        }
        ul.innerHTML = str;

    }

    window.onerror = function(sMsg,sUrl,sLine){
        msgFlag = false;
        result.setValue("An error was thrown and caught.\n"+"Error: " + sMsg + "\n"+"Line: " + sLine);
    }

    function initEditor(){
        var themeSelect = document.getElementById("themeSelect");
        var resultLangSelect = document.getElementById("resultLangSelect");

        inputtheme = themeSelect.value;
        outputtheme = themeSelect.value;
        //语言
        inputlanguage = "html";
        resultlanguage = resultLangSelect.value;


        input.setTheme("ace/theme/" + inputtheme);
        input.session.setMode("ace/mode/" + inputlanguage);
        //字体大小
        input.setFontSize(15);
        //设置只读（true时只读，用于展示代码）
        input.setReadOnly(false);
        //自动换行,设置为off关闭
        input.setOption("wrap", "free");
        //启用提示菜单
        ace.require("ace/ext/language_tools");
        input.setShowPrintMargin(false);
        input.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: false,
            enableLiveAutocompletion: true,
            showInvisibles: true
        });
        input.commands.addCommand({
		    name: 'myCommand',//命令名称
		    bindKey: {win: 'Ctrl-f',  mac: 'Command-F'},//快捷键
		    exec: function(editor) {
		        editor.execCommand ('find');
		    },
		    readOnly: true // false 只读模式
		});

        //语言
        result.setTheme("ace/theme/" + outputtheme);
        result.session.setMode("ace/mode/" + resultlanguage);
        //字体大小
        result.setFontSize(14);
        //设置只读（true时只读，用于展示代码）
        result.setReadOnly(false);
        //自动换行,设置为off关闭
        result.setOption("wrap", "free");
        //启用提示菜单
        ace.require("ace/ext/language_tools");
        result.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: false,
            enableLiveAutocompletion: true,
            showInvisibles: true
        });
        result.setShowPrintMargin(false);

    }
    function changeTheme(){
        var themeSelect = document.getElementById("themeSelect");

        input.setTheme("ace/theme/" + themeSelect.value);
        result.setTheme("ace/theme/" + themeSelect.value);
    }

    function changeLang(){
        var resultLangSelect = document.getElementById("resultLangSelect");

        result.session.setMode("ace/mode/" + resultLangSelect.value);
    }

    function changeLangByName(langName){
	    if(langName){
	        var resultLangSelect = document.getElementById("resultLangSelect");
	        resultLangSelect.value = langName;
	        result.session.setMode("ace/mode/" + resultLangSelect.value);
	    }
    }

    //执行Editor文本域内代码
    function runCode() {
        msgFlag = true;
        var t = input.getValue();
        var js = t.match(/<script>([\s\S]*?)<\/script>/i); //提取JS代码
        if(js){
            t = t.substring(0,js.index)+t.substring(js.index+js[0].length);
            //写入非JS代码到iframe
            var oldResultDiv = document.querySelector('iframe');
            if (oldResultDiv!=null && oldResultDiv.length != 0){document.body.removeChild(oldResultDiv);
            }

            var iframe = document.createElement('iframe');

			iframe.style.cssText = 'background-color:#fff;margin-top:10px; width: 1px; height:1px;';
			iframe.onload = function() {
				frameWin = document.querySelector('iframe').contentWindow;
				frameDoc = frameWin.document;
				frameBody = frameDoc.body;
				frameBody.innerHTML = t;
			}

			document.body.appendChild(iframe);

            var j = js[1].replace(/document *\. *write/g," document.getElementById('resultdiv').innerHTML = ");
            var newScript = document.createElement("script"); //创建&lt;script&gt;标签
            newScript.innerHTML = j;
            //清除oldScript
            var oldScript = document.getElementById("result").getElementsByTagName("script");
            if (oldScript!=null && oldScript.length != 0){
                for(var i=0;i<oldScript.length;i++){
                document.getElementById("result").removeChild(oldScript[i]);
                }
            }
            document.getElementById("result").appendChild(newScript); //写入JS代码
            //result.insert(j);
        }else {
            //不用走到这里
            result.setValue(t);
        }
        input.selection.clearSelection();
        result.selection.clearSelection();
        showMsg("执行成功");
    }

    //复制结果
    function copyResult() {
        result.selection.selectAll()
        result.focus();
        document.execCommand("copy");
        result.selection.clearSelection();
        showMsg("复制成功");
    }

    function copyAndRun(){
        input.setValue(result.getValue());
        input.selection.clearSelection();
        runCode();
    }

    //插入代码
    function insertFuncValue(obj) {
        hideAllTip();
        //插入值
        var myValue = obj.getElementsByClassName("value")[0].getElementsByTagName("code")[0].innerText;
        input.insert(myValue);
    }

    //替换代码
    function replaceFuncValue(obj) {
        hideAllTip();

        //插入值
        var myValue = obj.getElementsByClassName("value")[0].getElementsByTagName("code")[0].innerText;

        input.setValue(myValue);
        input.selection.clearSelection();
        runCode();
    }

    //插入本对象内文字
    function insertObjText(obj) {
        hideAllTip();

        //插入值
        var myValue = obj.innerHTML;

        input.insert(myValue);
    }

    var msgHideTime;
    //显示消息
    function showMsg(msgtext) {
        if(msgFlag){
            var msgback = document.getElementById("msgback");
            msgback.style.backgroundColor="rgba(2, 198, 90, 0.4)";
            msgback.innerHTML = msgtext;
            alphaPlay(msgback,"show",0);
            alphaPlay(msgback,"hiden",2000);
        }else{
            var msgback = document.getElementById("msgback");
            msgback.style.backgroundColor="rgb(227, 65, 32, 0.4)";
            msgback.innerHTML = "执行失败";
            alphaPlay(msgback,"show",0);
            alphaPlay(msgback,"hiden",2000);
        }
    }

    //立即显示，延迟渐隐
    function alphaPlay(obj, method, timeout) {
      var n = method == "show" ? 0 : 100,
        ie = window.ActiveXObject ? true : false;
      var time1;

      //如果已经在显示，继续显示，显示不需要延迟
      if (method == "show") {
         if(obj.style.opacity!=0){
            n = obj.style.opacity * 100;
            clearTimeout(time1);
            clearTimeout(msgHideTime);
         }

        var time1 = setInterval(function () {
          if (n < 100) {
            n += 10;
            if (ie) {
              obj.style.cssText = "filter:alpha(opacity=" + n + ")";
            } else {
              n == 100 ? (obj.style.opacity = 1) : (obj.style.opacity = "0." + n);
            }
          } else {
            clearTimeout(time1);
          }
        }, 30);
      }
      else{
          msgHideTime = setTimeout(function(){
              //method有两个值show或hiden
              var n = method == "show" ? 0 : 100,
                ie = window.ActiveXObject ? true : false;
              var time2 = setInterval(function () {
                clearTimeout(msgHideTime);
                  if (n > 0) {
                    n -= 10;
                    if (ie) {
                      obj.style.cssText = "filter:alpha(opacity=" + n + ")";
                    } else {
                      obj.style.opacity = "0." + n;
                    }
                  } else {
                    clearTimeout(time2);
                  }
              }, 30);
          },timeout);
      }
    }

    var timer;
    var timerout;
    //显示代码提示
    function showTip(obj){
        timer=setTimeout(function(){
            var objRect = obj.getBoundingClientRect();
            var tip = obj.getElementsByClassName("tip")[0];
            hideAllTip();
            tip.style.display="block";
            tip.style.background="#666666";

            tip.style.color="#fff";
            tip.style.padding="5px";
            tip.style.borderRadius="5px";
            tip.style.position="absolute";
            var tipRect = tip.getBoundingClientRect();

            tip.style.left=objRect.x-tipRect.width-10+"px";

            tip.style.top=objRect.y+"px";
        },300);

    }

    //隐藏提示
    function hideTip(obj){
        clearTimeout(timer);
        timerout=setTimeout(function(){
            obj.getElementsByClassName("tip")[0].style.display="none";
        },1000);
    }

    function keepShowTip(){
        clearTimeout(timerout);
    }

    //隐藏所有提示
    function hideAllTip(){
        //隐藏所有属性
        var othrobj = document.getElementsByClassName("tip");

        for(var i=0;i<othrobj.length;i++){
            othrobj[i].style.display="none"
        }
    }

    Date.prototype.format = function (fmt) {
	    var o = {
	    "M+": this.getMonth() + 1, //月份
	    "d+": this.getDate(), //日
	    "H+": this.getHours(), //小时
	    "m+": this.getMinutes(), //分
	    "s+": this.getSeconds(), //秒
	    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
	    "S": this.getMilliseconds() //毫秒
	    };
	    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	    return fmt;
    }

</script>

</body>


</html>

